<datatable-demos></datatable-demos>

<div class="content-section introduction">
    <div>
        <span class="feature-title">DataTable - <span class="subitem">Row Grouping</span></span>
        <span>Rows can either be grouped by a separate grouping row or using rowspan. Additional optional features
        are toggleable groups and footer rows.</span>
    </div>
</div>

<div class="content-section implementation">
    <p-dataTable [value]="cars1" sortField="brand" rowGroupMode="subheader" groupField="brand" expandableRowGroups="true"
            [sortableRowGroup]="false">
        <p-header>Toggleable Row Groups with Footers</p-header>
        <ng-template pTemplate="rowgroupheader" let-rowData>{{rowData['brand']}}</ng-template>
        <p-column field="color" header="Color"></p-column>
        <p-column field="year" header="Year"></p-column>
        <p-column field="vin" header="Vin"></p-column>
        <p-column field="price" header="Price">
            <ng-template let-col let-car="rowData" pTemplate="body">
                <span>{{car[col.field] | currency:'USD':true:'.0-0'}}</span>
            </ng-template>
        </p-column>
        <ng-template pTemplate="rowgroupfooter" let-car>
            <td colspan="3" style="text-align:right">Total Price</td>
            <td>{{calculateGroupTotal(car['brand']) | currency:'USD':true:'.0-0' }}</td>
        </ng-template>
    </p-dataTable>
    
    <p-dataTable [value]="cars2" sortField="brand" rowGroupMode="subheader" groupField="brand" [style]="{'margin-top':'50px'}">
        <p-header>Subheader</p-header>
        <ng-template pTemplate="rowgroupheader" let-rowData>{{rowData['brand']}}</ng-template>
        <p-column field="color" header="Color" sortable="true"></p-column>
        <p-column field="year" header="Year" sortable="true"></p-column>
        <p-column field="vin" header="Vin" sortable="true"></p-column>
    </p-dataTable>
    
    <p-dataTable [value]="cars3" sortField="brand" rowGroupMode="rowspan" [style]="{'margin-top':'50px'}">
        <p-header>RowSpan</p-header>
        <p-column field="brand" header="Brand" sortable="true"></p-column>
        <p-column field="color" header="Color" sortable="true"></p-column>
        <p-column field="year" header="Year" sortable="true"></p-column>
        <p-column field="vin" header="Vin" sortable="true"></p-column>
    </p-dataTable>
</div>

<div class="content-section documentation">
    <p-tabView effect="fade">
        <p-tabPanel header="datatablerowgroupdemo.ts">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/datatable/datatablerowgroupdemo.ts" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-typescript" pCode ngNonBindable>
export class DataTableRowGroupDemo implements OnInit &#123;

    cars1: Car[];
    
    cars2: Car[];
    
    cars3: Car[];
    
    constructor(private carService: CarService) &#123;&#125;

    ngOnInit() &#123;
        this.carService.getCarsMedium().then(cars => this.cars1 = cars);
        this.carService.getCarsMedium().then(cars => this.cars2 = cars);
        this.carService.getCarsMedium().then(cars => this.cars3 = cars);
    &#125;
    
    calculateGroupTotal(brand: string) &#123;
        let total = 0;
        
        if(this.cars1) &#123;
            for(let car of this.cars1) &#123;
                if(car.brand === brand) &#123;
                    total += car.price;
                &#125;
            &#125;
        &#125;

        return total;
    &#125;
&#125;
</code>
</pre>            
        </p-tabPanel>

        <p-tabPanel header="datatablerowgroupdemo.html">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/datatable/datatablerowgroupdemo.html" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-dataTable [value]="cars1" sortField="brand" rowGroupMode="subheader" groupField="brand" expandableRowGroups="true"
        [sortableRowGroup]="false"&gt;
    &lt;p-header&gt;Toggleable Row Groups with Footers&lt;/p-header&gt;
    &lt;ng-template pTemplate="rowgroupheader" let-rowData&gt;&#123;&#123;rowData['brand']&#125;&#125;&lt;/ng-template&gt;
    &lt;p-column field="color" header="Color"&gt;&lt;/p-column&gt;
    &lt;p-column field="year" header="Year"&gt;&lt;/p-column&gt;
    &lt;p-column field="vin" header="Vin"&gt;&lt;/p-column&gt;
    &lt;p-column field="price" header="Price"&gt;
        &lt;ng-template let-col let-car="rowData" pTemplate="body"&gt;
            &lt;span&gt;&#123;&#123;car[col.field] | currency:'USD':true:'.0-0'&#125;&#125;&lt;/span&gt;
        &lt;/ng-template&gt;
    &lt;/p-column&gt;
    &lt;ng-template pTemplate="rowgroupfooter" let-car&gt;
        &lt;td colspan="3" style="text-align:right"&gt;Total Price&lt;/td&gt;
        &lt;td&gt;&#123;&#123;calculateGroupTotal(car['brand']) | currency:'USD':true:'.0-0' &#125;&#125;&lt;/td&gt;
    &lt;/ng-template&gt;
&lt;/p-dataTable&gt;

&lt;p-dataTable [value]="cars2" sortField="brand" rowGroupMode="subheader" groupField="brand" [style]="&#123;'margin-top':'50px'&#125;"&gt;
    &lt;p-header&gt;Subheader&lt;/p-header&gt;
    &lt;ng-template pTemplate="rowgroupheader" let-rowData&gt;&#123;&#123;rowData['brand']&#125;&#125;&lt;/ng-template&gt;
    &lt;p-column field="color" header="Color" sortable="true"&gt;&lt;/p-column&gt;
    &lt;p-column field="year" header="Year" sortable="true"&gt;&lt;/p-column&gt;
    &lt;p-column field="vin" header="Vin" sortable="true"&gt;&lt;/p-column&gt;
&lt;/p-dataTable&gt;

&lt;p-dataTable [value]="cars3" sortField="brand" rowGroupMode="rowspan" [style]="&#123;'margin-top':'50px'&#125;"&gt;
    &lt;p-header&gt;RowSpan&lt;/p-header&gt;
    &lt;p-column field="brand" header="Brand" sortable="true"&gt;&lt;/p-column&gt;
    &lt;p-column field="color" header="Color" sortable="true"&gt;&lt;/p-column&gt;
    &lt;p-column field="year" header="Year" sortable="true"&gt;&lt;/p-column&gt;
    &lt;p-column field="vin" header="Vin" sortable="true"&gt;&lt;/p-column&gt;
&lt;/p-dataTable&gt;
</code>
</pre>
        </p-tabPanel>
    </p-tabView>
</div>